<template>
	<view class="g-bd">
		<!-- 顶部筛选 -->
		<view class="g-hd">
			<view class="m-tabs">
				<view class="u-tab-itm">
					最新
				</view>
				<view class="tabs-item f-mtb">
					推荐
				</view>
			</view>
			<view class="m-filtrate" @click="tabFiltrate">
				<view>筛选</view>
				<image class="u-img f-mtb" src="../../../static/icon/wx.png" mode=""></image>
			</view>
		</view>
	<!-- 	<view class="filtrate-content" :class="active ? 'show' : 'hide' ">
			<view class="filtrate-content-list">
				<view class="filtrate-content-list-item">
					<view class="title">学历要求</view>
					<checkbox-group @change="checkRecord1">
						<label v-for="(item, index) in educationList" :key="index">
							<checkbox :value="item.value" :checked="item.checked" />{{item.name}}
						</label>
					</checkbox-group>
				</view>
				<view class="filtrate-content-list-item">
					<view class="title">薪资待遇（单选）</view>
					<radio-group @change="radioChange">
						<label>
							<radio value="noLimit" checked="true" />不限
						</label>
						<label>
							<radio value="under3k" />3K以下
						</label>
						<label>
							<radio value="until35" />3-5k
						</label>
						<label>
							<radio value="until510" />5-10k
						</label>
						<label>
							<radio value="until1020" />10-20k
						</label>
						<label>
							<radio value="until2050" />20-50k
						</label>
						<label>
							<radio value="above50" />50k以上
						</label>
					</radio-group>
				</view>
				<view class="filtrate-content-list-item">
					<view class="title">经验要求</view>
					<checkbox-group @change="checkRecord2">
						<label>
							<checkbox value="0" checked="true" />不限
						</label>
						<label>
							<checkbox value="2" />在校生
						</label>
						<label>
							<checkbox value="3" />应届生
						</label>
						<label>
							<checkbox value="4" />1年以内
						</label>
						<label>
							<checkbox value="5" />1-3年
						</label>
						<label>
							<checkbox value="6" />3-5年
						</label>
						<label>
							<checkbox value="7" />5-10年
						</label>
						<label>
							<checkbox value="8" />10年以上
						</label>
					</checkbox-group>
				</view>
				重置or确认
				<view class="filtrate-btn">
					<view class="filtrate-btn-list">
						<view class="filtrate-btn-list-item" @click="reset">重置</view>
						<view class="filtrate-btn-list-item" @click="confirm">确定</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 内容 -->
		<view class="m-list" style="padding-top: 68rpx;">
			<view class="u-itm" v-for="(item, index) in recruitmentList" :key="index" @click="toDetail(index)">
				<view class="u-itm-content">
					<view class="u-itm-l f-ptb">
						<view class="f-zfs32 f-fw800 f-mtb10">{{item.post_name}}</view>
						<view class="m-tag f-ptb f-zfs26 f-mtb10">
							<view class="u-tag-itm">{{item.work_city}}</view>
							<view class="u-tag-itm" v-if="item.work_experience == 1">不限</view>
							<view class="u-tag-itm" v-if="item.work_experience == 2">在校生</view>
							<view class="u-tag-itm" v-if="item.work_experience == 3">应届生</view>
							<view class="u-tag-itm" v-if="item.work_experience == 4">1年以内</view>
							<view class="u-tag-itm" v-if="item.work_experience == 5">1-3年</view>
							<view class="u-tag-itm" v-if="item.work_experience == 6">3-5年</view>
							<view class="u-tag-itm" v-if="item.work_experience == 7">5-10年</view>
							<view class="u-tag-itm" v-if="item.work_experience == 8">10年以上</view>
							<view class="u-tag-itm" v-if="item.education == 1">不限</view>
							<view class="u-tag-itm" v-if="item.education == 2">初中以及以下</view>
							<view class="u-tag-itm" v-if="item.education == 3">中专/中技</view>
							<view class="u-tag-itm" v-if="item.education == 4">高中</view>
							<view class="u-tag-itm" v-if="item.education == 5">大专</view>
							<view class="u-tag-itm" v-if="item.education == 6">本科</view>
							<view class="u-tag-itm" v-if="item.education == 7">硕士</view>
							<view class="u-tag-itm" v-if="item.education == 8">博士</view>
						</view>
						<view class="f-zfs28 f-ptb f-mtb10">{{item.company_name}}</view>
						<view class="u-contact f-zfs28 f-ptb f-mtb10">
							<image class="u-img" :src="item.href" mode="" :lazy-load="true"></image>
							<view class="f-zfs28 f-mtb">{{item.name}}/{{item.phone}}</view>
						</view>
					</view>
					<view class="u-itm-r u-salary">{{item.salary_min}}-{{item.salary_max}}K</view>
				</view>
			
				
			</view>
		</view>
		<view class="footer" v-show="showMore">
			暂无更多数据
		</view>
		<!-- 遮罩 -->
		<view :class="active ? 'mask' : '' " @click="close"></view>
	</view>
</template>

<script>
	import HOME from '@/api/home/index.js'

	export default {
		data() {
			return {
				active: false,
				recruitmentList: [],
				educationList: [{
					value: '0',
					name: '不限',
					checked: true
				}, {
					value: '2',
					name: '初中以及以下',
					checked: false
				}, {
					value: '3',
					name: '中专/中技',
					checked: false
				}, {
					value: '4',
					name: '高中',
					checked: false
				}, {
					value: '5',
					name: '大专',
					checked: true
				}, {
					value: '6',
					name: '本科',
					checked: true
				}, {
					value: '7',
					name: '硕士',
					checked: true
				}, {
					value: '8',
					name: '博士',
					checked: false
				}],
				workExperience: '0',
				education: '0',
				salary_max: '0',
				salary_min: '0',
				
				showMore: false,
				page: 1
			}
		},
		mounted() {
			this.getRecruitment();
		},
		methods: {
			tabFiltrate() {
				this.active = !this.active;
			},
			getRecruitment() {
				uni.showLoading({
					title: '获取数据中',
					mask: true
				});
				HOME.recruitment(this.page, 10, 2, this.workExperience, this.education, this.salary_max, this.salary_min)
					.then(
						res => {
							uni.hideLoading();
							if (res.data.data.length == 0) {
								this.showMore = true;
							}
							this.recruitmentList = this.recruitmentList.concat(res.data.data);
						})
			},
			// 下拉刷新
			onReachBottom() {
				this.page += 1;
				if(!this.showMore) {
					this.getRecruitment();
				}
			},
			// 前往职位详情
			toDetail(index) {
				uni.navigateTo({
					url: 'detail/index?idx=' + index
				})
			},
			// 筛选
			checkRecord1(e) {
				var self = this;
				if (e.detail.value[0] == 0) {
					e.detail.value = ["0"];
					console.log(e.detail.value)
					for (var i = 1; i < this.educationList.length; i++) {
						this.educationList[i].checked = false;
					}
				} else {

				}
			},
			radioChange(e) {
				switch (e.detail.value) {
					case 'under3k':
						this.salary_max = 3;
						this.salary_min = 0;
						break;
					case 'until35':
						this.salary_max = 5;
						this.salary_min = 3;
						break;
					case 'until510':
						this.salary_max = 10;
						this.salary_min = 5;
						break;
					case 'until1020':
						this.salary_max = 20;
						this.salary_min = 10;
						break;
					case 'until2050':
						this.salary_max = 50;
						this.salary_min = 20;
						break;
					case 'above50':
						this.salary_max = null;
						this.salary_min = 50;
						break;
					default:
						this.salary_max = null;
						this.salary_min = null;
				}
			},
			checkRecord2(e) {
				this.workExperience = e.detail.value;
			},

			// 筛选确定
			confirm() {
				uni.showLoading({
					title: '获取数据中',
					mask: true
				});
				HOME.recruitment(1, 10, 2, this.workExperience, this.education, this.salary_max, this.salary_min).then(
					res => {
						this.active = false;
						uni.hideLoading();
						this.recruitmentList = res.data.data;
					})
			},
			close() {
				this.active = !this.active;
			}

		}
	}
</script>

<style scoped lang="scss">
	.g-hd {
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 24rpx;
		font-size: 28rpx;
		background-color: #FFF;
		z-index: 99;
		
		.m-tabs, .m-filtrate {
			display: flex;
			align-items: center;
		}

		// .m-tab {
		// 	display: flex;
			

		// 	padding: 20rpx;

		// 	.tabs {
		// 		display: flex;

		// 		font-size: 30rpx;
		// 		color: #999;

		// 		.tabs-item {
		// 			padding-right: 20rpx;
		// 		}
		// 	}

		// 	.filtrate {
		// 		display: flex;
		// 		align-items: center;

		// 		font-size: 30rpx;

		// 		image {
		// 			width: 30rpx;
		// 			height: 30rpx;
		// 			margin-left: 10rpx;
		// 		}
		// 	}
		// }

		// .show {
		// 	display: block;
		// }

		// .hide {
		// 	display: none;
		// }

		// .filtrate-content {
		// 	position: absolute;
		// 	top: 6vh;
		// 	right: 0;
		// 	bottom: 0;
		// 	left: 0;

		// 	.filtrate-content-list {
		// 		padding: 0 10rpx;
		// 		background-color: #ffffff;

		// 		.filtrate-content-list-item {
		// 			font-size: 28rpx;

		// 			.title {
		// 				font-size: 36rpx;
		// 				font-weight: 800;
		// 			}

		// 			checkbox-group,
		// 			radio-group {
		// 				display: flex;
		// 				flex-wrap: wrap;

		// 				margin: 20rpx 0;

		// 				label {
		// 					width: 33%;
		// 					padding: 10rpx 0;
		// 				}
		// 			}

		// 			checkbox,
		// 			radio {
		// 				transform: scale(0.8)
		// 			}
		// 		}

		// 		.filtrate-btn {
		// 			border-top: 1rpx #ccc solid;

		// 			.filtrate-btn-list {
		// 				display: flex;
		// 				padding: 20rpx 15rpx;
		// 				font-size: 30rpx;

		// 				.filtrate-btn-list-item {
		// 					text-align: center;
		// 					width: 365rpx;
		// 				}
		// 			}
		// 		}
		// 	}
		// }
	}
	
	.m-tag {
		display: flex;
		flex-wrap: wrap;
		
		.u-tag-itm {
			margin-right: 20rpx;
			padding: 10rpx;
			background-color: #C0C0C0;
			border-radius: 8rpx;
		}
	}
	
	.u-contact {
		display: flex;
		align-items: center;
	}
	
	.f-mtb10 {
		margin: 10rpx 0;
	}
	
	.u-salary {
		color: #2A9F93;
	}
	
	
</style>
